<template>
	<view :style="$theme.pageStyle">

		<z-nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
			title="订单详情">
			<view class="preview" slot="center">订单详情</view>
		</z-nav-bar>
		
		<view class="w-full relative top_bg">
			<view class="px-20 relative z-80" style="padding-top: 88px;">
				<view class="flex-between-center h-160">
					<view class="flex-1 text--w111-fff pl-12">
						<view class="fs-36 fw-500 lh-50rpx">{{OrderInfo.status_desc}}</view>
						<view class="fs-26 lh-36rpx mt-8">状态描述</view>
					</view>
					<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/151720601895Tmo92L.png"
						class="w-140 h-140"></image>
				</view>

				<view class="bg--w111-fff rd-24rpx p-32 relative z-1">
					<view class="flex-between-center">
						<view class="flex-y-center fw-500 fs-30 lh-42rpx">
							<text class="">{{OrderInfo.card.student_name}}</text>
							<text class="pl-20">{{OrderInfo.card.home_phone}}</text>
						</view>
					</view>
					<view class="fs-24 text--w111-999 lh-34rpx mt-12 w-full line2 pb-8">{{OrderInfo.card.idcode}}</view>
				</view>
			</view>
		</view>
		
		<view class="px-20" style="margin-top: 15px;">
			<view class="order_card bg--w111-fff rd-24rpx pt-32 pb-32 pl-24 pr-24">
				<view class="flex-between-center">
					<view class="flex-y-center">
						<text class="fs-28 lh-40rpx text--w111-333 pl-16">{{OrderInfo.create_time}}</text>
					</view>
					<view class="fs-26">
						<view class="font-num">
							<text>{{OrderInfo.status_desc}}</text>
						</view>
					</view>
				</view>
				<view class="mt-26">
					<view class="flex justify-between">
						<view class="flex">
							<u--image :showLoading="true" mode="widthFix" radius="16rpx" :src="OrderInfo.goods.image"
								width="136rpx" height="136rpx"></u--image>
							<view class="ml-20">
								<view class="w-346 fs-28 text--w111-333 lh-40rpx line2">
									{{OrderInfo.goods.name}}
								</view>
								<view class="w-346 fs-24 text--w111-999 lh-34rpx line1 mt-12"
									v-if="OrderInfo.spec_type == 1">
									默认规格
								</view>
								<view class="w-346 fs-24 text--w111-999 lh-34rpx line1 mt-12" v-else>
									{{OrderInfo.spec.sku_value}}
								</view>
							</view>
						</view>
						<view>
							<view class="base-money weight">
								<text class="symbol" style="font-size: 10px;">￥</text>
								<text class="integer" style="font-size: 16px;">{{ OrderInfo.total_amount }}</text>
							</view>
							<view class="fs-24 text--w111-999 lh-34rpx text-right">{{OrderInfo.pay_desc}}</view>
						</view>
					</view>
				</view>
		
				
				<view class="h-72 rd-8rpx bg--w111-f5f5f5 mt-26 px-20 flex-between-center">
					<view style="display: flex;">
						<text class="text--w111-333 fs-26">{{OrderInfo.goods.setout}}</text>
						<view class="aeroplane" style="margin-left: 5px;margin-right: 5px;">
							<uni-icons type="arrow-right" size="16"></uni-icons>
						</view>
						<text class="text--w111-333 fs-26">{{OrderInfo.goods.destination}}</text>
					</view>
					<view>
						<text class="text--w111-333 fs-26">{{OrderInfo.goods.departureDuration}}</text>
					</view>
				</view>
				
				<view class="mt-32 flex-between-center">
					<text></text>
					<view class="flex">
						<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 border_ccc"
							v-if="OrderInfo.status == 0 || OrderInfo.status == 3"
							@tap.stop="showModalChange(OrderInfo.id, 3)">取消订单</view>
						<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff"
							v-if="OrderInfo.pay_status == 0" @click.stop="goPay(OrderInfo.id)">立即支付</view>
						<view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff"
							v-else-if="OrderInfo.status == 2 && OrderInfo.evaluate == 0" @click.stop="goOrderDetails(OrderInfo.id)">立即评价</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="px-20">
			<view class="mt-20 bg--w111-fff rd-16rpx pt-32 pr-24 pl-24 pb-32">
				<view class="cell flex-between-center">
					<text class="fs-28">商品总价</text>
					<text class="fs-28">￥{{ OrderInfo.order_amount}}</text>
				</view>
				<view class="cell flex-between-center">
					<text class="fs-28">实际支付</text>
					<text class="fs-28">￥{{ OrderInfo.total_amount}}</text>
				</view>
				<view class="cell flex-between-center">
					<text class="fs-28">支付方式</text>
					<text class="fs-28">{{OrderInfo.pay_desc}}</text>
				</view>
				<view class="cell flex-between-center" v-if='OrderInfo.coupon_id > 0'>
					<text class="fs-28">优惠券抵扣</text>
					<text class="fs-28">-￥0</text>
				</view>
			</view>
		</view>
		<view class="px-20">
			<view class="mt-20 bg--w111-fff rd-16rpx pt-32 pr-24 pl-24 pb-32">
				<view class="cell flex-between-center">
					<text class="fs-28">订单编号</text>
					<view>
						<text class="fs-28 pr-12">{{OrderInfo.sn}}</text>
						<text class="inline-block copy_btn fs-22  " @tap="copy(orderInfo.order_id)">复制</text>
					</view>
				</view>
				<view class="cell flex-between-center" v-if="OrderInfo.refund_status > 1">
					<text class="fs-28">退款金额</text>
					<text class="fs-28">￥ {{OrderInfo.refunded_price}} </text>
				</view>
				<view class="cell flex-between-center">
					<text class="fs-28">下单时间</text>
					<text class="fs-28">{{OrderInfo.create_time}}</text>
				</view>
				<view class="cell flex-between-center">
					<text class="fs-28">支付时间</text>
					<text class="fs-28">{{OrderInfo.pay_time || ''}}</text>
				</view>
				<view class="cell flex-between-center">
					<text class="fs-28">支付状态</text>
					<text class="fs-28" v-if="OrderInfo.pay_status == 1">已支付</text>
					<text class="fs-28" v-else>未支付</text>
				</view>
			</view>
		</view>
		
		<view class="h-200 pb-safe"></view>
		
		
		
		
		
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		components: {},
		data() {
			return {
				id: 0,
				scrollTop: 0,
				OrderInfo: [],
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.GetData()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			async GetData() {
				try {
					const res = await $H.post('user/OrderInfo', {
						id :this.id
					}, {
						token: true
					});
					this.OrderInfo = res.data
				} catch (error) {
			
				} finally {
			
				}
			},
		},
	}
</script>

<style>
	page{
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	
	.top_bg{
		background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light-3) 52%, rgba(233, 51, 35, 0) 100%);
	}
	
	.white_jianbian {
		height: 120rpx;
		background: linear-gradient(0deg, #F5F5F5 0%, rgba(245, 245, 245, 0) 100%);
	}

	.bt_line {
		height: 1px;
		width: 680rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.h-68 {
		height: 68rpx;
	}

	.order_goods~.order_goods {
		margin-top: 32rpx;
	}

	.con_border {
		border: 1px solid var(--color-primary);
		line-height: 22rpx;
	}

	.cell input {
		width: 450rpx;
		text-align: right;
	}

	.cell .radio {
		margin: 0 22rpx;
		padding: 10rpx 0;
	}

	.cell~.cell {
		margin-top: 40rpx;
	}

	.SemiBold {
		font-family: SemiBold;
	}

	.copy_btn {
		width: 68rpx;
		height: 36rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
		text-align: center;
		line-height: 36rpx;
	}

	.btn~.btn {
		margin-left: 16rpx;
	}

	.border {
		border: 1rpx solid #ccc;
	}

	.border_bb {
		border-bottom: 1px solid #eee;
	}

	.h-128 {
		height: 128rpx;
	}

	.w-578 {
		width: 578rpx;
	}

	.bg-primary-light {
		background: var(--color-primary-light-9);
	}

	.mt-228 {
		margin-top: 228rpx;
	}

	.virtual_info {
		margin-top: -160rpx;
	}

	.bt {
		border-top: 1px solid #eee;
	}

	.z-1 {
		z-index: 1;
	}

	.gold {
		color: #DCA658;
	}

	.card-pasd {
		color: #FF7D00;
	}
	
	.base-money{
		color: var(--color-primary);
	}
	
</style>